<template>
  <div>
     <el-tabs type="border-card">
          <el-tab-pane label="学生档案">
              <table class='archivestable' cellspacing="0">
                 <tr class='archivestr1'>
                  <td colspan="8">学生档案信息</td>
                 </tr>
                 <tr>
                   <td>姓名</td>
                   <td>{{data.studentName}}</td>
                   <td>性别</td>
                   <td>{{data.sex}}</td>
                   <td>年龄</td>
                   <td>{{data.age}}</td>
                   <td>年级</td>
                   <td>{{data.gradeStr}}</td>
                 </tr>
                  <tr>
                   <td>学校</td>
                   <td>{{data.school}}</td>
                   <td>联系电话</td>
                   <td>{{data.cellPhone}}</td>
                   <td>家庭住址</td>
                   <td>{{data.adress}}</td>
                   <td>爱好特长</td>
                   <td>{{data.hobby}}</td>
                 </tr>
                 <tr>
                   <td colspan="2">辅佐作业家长</td>
                   <td colspan="6">{{data.whoCoachChild}}</td>
                 </tr>
                 <tr>
                   <td colspan="2" style='padding:12px 10px;'>家长希望学生在培训机构获得的收获</td>
                   <td colspan="6">{{data.getGain}}</td>
                 </tr>
              </table>
          </el-tab-pane>
          <el-tab-pane label="在校学习情况（家长输入）">
              <div class='archivesform_box'>
                  <el-select v-model="value" placeholder="请选择时间段" style='margin-left:10px;margin-bottom:7px;'>
                      <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                  </el-select>
                  <el-button type="primary" style='margin-left:10px;margin-bottom:7px;'>查看</el-button>
              </div>
              <table class='archivestable' cellspacing="0">
                 <tr class='archivestr1'>
                  <td colspan="8">小升初考试成绩</td>
                 </tr>
                 <tr>
                   <td>科目</td>
                   <td>分数</td>
                   <td colspan="2">学生评语</td>
                 </tr>
                 <tr>
                  <td>语文</td>
                   <td>90</td>
                   <td colspan="2">阅读理解能力偏差</td>
                 </tr>
                 <tr>
                  <td>数学</td>
                   <td>90</td>
                   <td colspan="2">选择题不理想</td>
                 </tr>
                 <tr>
                  <td>语文</td>
                   <td>90</td>
                   <td colspan="2">阅读理解能力偏差</td>
                 </tr>
              </table>
              <div class='archivespagebg'>
                <el-pagination    :page-size="100"  layout="total, prev, pager, next"  :total="1000" class='archivespagesbox'>    </el-pagination>
              </div>
          </el-tab-pane>
          <el-tab-pane label="培训机构测试情况">
           <div class='archivesform_box'>
                <el-select v-model="value" placeholder="请选择科目" style='margin-left:10px;margin-bottom:7px;'>
                    <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select>
                <el-select v-model="value" placeholder="请选择时间段" style='margin-left:10px;margin-bottom:7px;'>
                    <el-option  v-for="item in options"   :key="item.value"  :label="item.label"  :value="item.value"></el-option>
                </el-select>
                <el-button type="primary" style='margin-left:10px;margin-bottom:7px;'>查看</el-button>
            </div>
            <table class='archivestable' cellspacing="0">
                 <tr class='archivestr1'>
                  <td colspan="8">随堂测试情况</td>
                 </tr>
                 <tr>
                   <td>科目</td>
                   <td>分数</td>
                   <td colspan="2">学生评语</td>
                 </tr>
                 <tr>
                  <td>语文</td>
                   <td>90</td>
                   <td colspan="2">阅读理解能力偏差</td>
                 </tr>
                 <tr>
                  <td>数学</td>
                   <td>90</td>
                   <td colspan="2">选择题不理想</td>
                 </tr>
                 <tr>
                  <td>语文</td>
                   <td>90</td>
                   <td colspan="2">阅读理解能力偏差</td>
                 </tr>
              </table>
              <table class='archivestable' cellspacing="0">
                 <tr class='archivestr1'>
                  <td colspan="8">第一次测试情况</td>
                 </tr>
                 <tr>
                   <td>科目</td>
                   <td>分数</td>
                   <td colspan="2">学生评语</td>
                 </tr>
                 <tr>
                  <td>语文</td>
                   <td>90</td>
                   <td colspan="2">阅读理解能力偏差</td>
                 </tr>
                 <tr>
                  <td>数学</td>
                   <td>90</td>
                   <td colspan="2">选择题不理想</td>
                 </tr>
                 <tr>
                  <td>语文</td>
                   <td>90</td>
                   <td colspan="2">阅读理解能力偏差</td>
                 </tr>
              </table>
              <div class='archivespagebg'>
                <el-pagination    :page-size="100"  layout="total, prev, pager, next"  :total="1000" class='archivespagesbox'>    </el-pagination>
              </div>
          </el-tab-pane>
     </el-tabs>
  </div>
</template>
<script> 

export default {
    data() {
        return {            
            data: {}
        }
    },
    
    methods: {
        getList() {
            this.axios({
                method: 'get',
                url: this.url + 'web/student/StudentRecord/findStuRecord',
                headers: { 'token': this.TOKEN }
            }).then(res => {
                if(res.data.code == 200) {
                    this.data = res.data.data;
                } else {
                  this.$message({
                      message: res.data.message,
                      type: 'error'
                  })
                }
            })
            
        }
    },
    mounted() {
        this.getList();
    }
}

 

</script>
<style>
.archivespagesbox{float: right}
.archivespagebg{margin-bottom: 15px;background: #F2F2F2;border-radius: 5px;margin-top: 5px;padding:10px;margin-bottom: 10px;overflow: hidden}
.archivestr1{background: #fafafa;}
.archivestable{width:100%;border:1px solid #E6EBF5;}
.archivestable>tr>td{border-bottom:1px solid #E6EBF5;border-right:1px solid #E6EBF5;padding:12px 0;text-align: center;width:12.5%;font-size: 14px;color:#5a5e66;}
.archivesform_box{margin-bottom:5px;background: #F2F2F2;border-radius: 5px;padding:10px 10px 3px 10px}
</style>
